<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>优品-支付</title>
  <link rel="shortcut icon" href="/static/order/pay/img/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="/static/order/pay/css/style.css">
  <script src="/static/order/pay/js/jquery-3.1.1.min.js" charset="utf-8"></script>
</head>

<body>
  <div class="One_Jdbox">
    <div class="Jdbox_head">
      <a href="http://yomall.com"><img src="/static/order/pay/img/logo.png" alt=""></a>
      <span class="bank">收银台</span>
      <ul>
        <li><span>[[${session.loginUser==null?'':session.loginUser.nickname}]]</span><span> 退出</span></li>
        <li>我的订单</li>
        <li>支付帮助</li>
      </ul>
    </div>
    <div class="Jdbox_BuySuc">
      <dl>
        <dt><img src="/static/order/pay/img/saoyisao.png" alt=""></dt>
        <dd>
          <span>订单提交成功，请尽快付款！订单号：[[${orderSubmitResponse.order.orderSn}]]</span>
          <span>应付金额<font>[[${#numbers.formatDecimal(orderSubmitResponse.order.payAmount,1,2)}]]</font>元</span>
        </dd>
        <dd>
          <span>推荐使用</span>
          <span>扫码支付请您在<font>24小时</font>内完成支付，否则订单会被自动取消(库存紧订单请参见详情页时限)</span>
          <span>订单详细</span>
        </dd>
      </dl>
    </div>
    <div class="Jd_Con">
      <p class="JdCon_title"><img src="/static/order/pay/img/title.png" alt=""></p>
      <div class="Jd_Fenqi">
        <ul>
          <li><img src="/static/order/pay/img/BAITIAO_2.0.png" alt="">打白条</li>
          <li>
            <span>可用额度 7275.38元</span>
            <span>白条还款日 2021-01-27</span>
            <span>
              <font>优惠</font>随机立减(最高10元)
            </span>
          </li>
          <li>支付<font>28.90</font>元</li>
        </ul>
        <ol>
          <li>
            <p>不分期</p>
            <p>0服务费</p>
          </li>
          <li>
            <p>3期</p>
            <p>9.48元/期</p>
          </li>
          <li>
            <p>6期</p>
            <p>4.94元/期</p>
          </li>
          <li>
            <p>12期</p>
            <p>2.35元/期</p>
          </li>
          <li>
            <p>24期</p>
            <p>1.44元/期</p>
          </li>
        </ol>
      </div>
      <div class="Jd_main">
        <ul>
          <li>
            <span>
              <img src="/static/order/pay/img/XJKCONSUME.png" alt="">优品小金库
            </span>
            <span>未开通小金库</span>
          </li>
          <li>
            <span>
              <img src="/static/order/pay/img/CMB.png" alt="">招商银行
            </span>
            <span>信用卡(4337)</span>
            <span>
              <font>优惠</font>单单减最高99元
            </span>
          </li>
          <li>
            <button>更多付款方式</button>
            <button>添加新卡/网银支付</button>
          </li>
          <li>
            <p>请输入6位数字支付密码</p>
            <input type="password"><span>忘记支付密码？</span>
          </li>
          <li>
            <button>立即支付</button>
          </li>
        </ul>
      </div>
    </div>
    <div class="Jd_footer">
      <ul>
        <li>
          <img src="/static/order/pay/img/weixin.png" alt="">微信支付
        </li>
        <li>
          <img src="/static/order/pay/img/zhifubao.png" style="weight:auto;height:30px;" alt="">
          <a th:href="'http://order.yomall.com/payOrder?orderSn='+${orderSubmitResponse.order.orderSn}">支付宝</a>
        </li>
      </ul>
    </div>
    <div class="Jd_foots">
      <p>
        <span>Copyright @2019-2021 优品yomall.com 版权所有</span>
      </p>
    </div>
  </div>
</body>
<script type="text/javascript">
  //头部订单成功 订单详细鼠标移入效果
  $(".Jdbox_BuySuc dl dd:last-child span:last-child").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#7EA4FF")
  })
  //分期付款鼠标移入hover效果
  $(".Jd_Fenqi>ol li:not(:first-child)").mouseover(function () {
    $(this).css({ "cursor": "pointer", "border": "1px solid #E31613" })
  }).mouseout(function () {
    $(this).css("border", "1px solid #C9DFFF")
  })
  //支付方式按钮选择hover效果
  $(".Jd_main ul li:nth-child(3) button").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#67A4FF")
  })
  //忘记密码鼠标移入效果
  $(".Jd_main ul li:nth-child(4) span").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#67A4FF")
  })
  //立即支付按钮效果
  $(".Jd_main ul li:nth-child(5) button").mouseover(function () {
    $(this).css({ "cursor": "pointer", "background": "#FF5350" })
  }).mouseout(function () {
    $(this).css("background", "#FC6E6C")
  })

  $(".Jd_footer ul li").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#5E5E5E")
  })

  $(".Jdbox_head>ul li span").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#666666")
  })
  $(".Jdbox_head>ul li:not(:first-child)").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#E31613" })
  }).mouseout(function () {
    $(this).css("color", "#666666")
  })

  $(".Jd_Fenqi ul li:first-child").mouseover(function () {
    $(this).css({ "cursor": "pointer", "color": "#666666" })
  }).mouseout(function () {
    $(this).css({ "color": "black" })
  })
</script>

</html>